<!--订单管理-->
<template>
  <div>
    <div class="bread">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/managerMain' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--返回顶部-->
    <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
    <!--订单表格-->
    <el-table :data="orderTable"  stripe style="width: 100%" >
      <el-table-column type="index"  label="序号" width="100" align="center"></el-table-column>
      <el-table-column prop="did" label="订单号" width="100" align="center"></el-table-column>
      <el-table-column prop="consignee" label="收货人" width="200" align="center"></el-table-column>
      <el-table-column prop="time" label="时间" width="250" align="center"></el-table-column>
      <el-table-column prop="tel" label="电话" widt="250" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <temple slot-scope="scope">
          <el-button type="success"  round @click="orderDetails(scope.row.did)">查看详情 <i class="el-icon-tickets"></i></el-button>
          <!--"详情"按钮打开嵌套表格-->
          <el-dialog title="订单详情" :visible.sync="dialogTableVisible" width="420px">
            <el-table :data="gridTable" stripe>
              <el-table-column prop="uname" label="用户" align="center"></el-table-column>
              <el-table-column prop="quantity" label="数量" align="center"></el-table-column>
              <el-table-column prop="ISBN" label="ISBN" align="center"></el-table-column>
            </el-table>
          </el-dialog>
        </temple>
      </el-table-column>
    </el-table>
    <!--分页功能-->
    <div style="margin-top:20px;">
      <h>共{{total}}条</h>
    </div>
  </div>
</template>

<script>
export default {
  name: "orderManage",
  data() {
    return {
      //分页查询变量
      total: 0,
      //表格变量
      orderTable:[],//存放各个订单数据
      //嵌套表格变量
      gridTable: [],//存放单个订单详细数据
      dialogTableVisible: false,
      //页面装饰变量
      headerBg: 'headerBg'
    }
  },
  created() {
    this.load()
  },
  methods:{
    load() {
      //url为获取整个订单列表
      this.$axios.get("http://localhost:9090/detail/")
        .then(res =>{
          console.log(res.data);
          if(res.data.code=="200")
          //赋值
          {this.orderTable=res.data.data;
          this.total=this.orderTable.length;}
          else
          {
            this.$message({
							message:res.data.msg,
							type:'error'
							});
          }
        })
    },
    //订单详情
    orderDetails(did){
      this.dialogTableVisible=true;
      //通过oid获取detail的url
      this.$axios.get(`http://localhost:9090/order/findbydid?did=${did}`,{
        did:did
      })
      .then(res=>{
          if(res.data.code==="200")
            {
              console.log(res.data.data);
              this.gridTable=res.data.data;
            }
            else{
              this.$message({
							message:res.data.msg,
							type:'error'
							});
            }
      })
    }
  }
}
</script>

<style>
.headerBg {
  background-color: #cccccc!important;
}
.el-header {
  height: 70px !important;
}
.bread{
	margin-bottom: 20px;
}

.el-breadcrumb  /deep/  .el-breadcrumb__inner 
      {
        font-size: 30;			
    }
</style>
